<template>
  <el-row type="flex" justify="space-between" style="width:100%">
    <el-col>{{ data.name }}</el-col>
    <el-col>
      <el-row type="flex" justify="end">
        <span style="margin-right:10px">{{ data.manager }}</span>
        <el-dropdown @command="handleCommand">
          <span>操作
            <i class="el-icon-arrow-down" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="add">
              添加子部门
            </el-dropdown-item>
            <el-dropdown-item v-if="type===3" command="see">
              查看部门
            </el-dropdown-item>
            <el-dropdown-item v-if="type===3" command="del">
              删除部门
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { delDepart } from '@/api/department'
export default {
  props: {
    data: {
      type: Object,
      required: true
    },
    type: {
      type: [Number, String],
      default: 1
    }
  },
  methods: {
    async delDepart() {
      await delDepart(this.data.id)
    },
    async handleCommand(command) {
      try {
        if (command === 'del') {
          await this.$confirm('确定删除嘛')
          await this.delDepart()
          this.$emit('updatePage')
          this.$message.success('删除成功')
        } else if (command === 'add') {
          this.$emit('shouDialogEvent', this.data)
        } else {
          this.$emit('shouDialogEvent', this.data, 'see')
        }
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style>

</style>
